<template>
  <div class="avator_module">
    <span :class="['avator', `is-${size}`]">
      {{ username[0] }}
    </span>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'
@Component
class VueModule extends Vue {
  @Prop({ required: true }) username!: string
  @Prop({ default: 'normal' }) size!: string
}
export default VueModule
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
.avator_module {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  .avator {
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    margin-right: 10px;
    text-align: center;
    line-height: 36px;
    border-radius: 50%;
    font-size: 14px;
    color: #ffffff;
    cursor: pointer;
    #color(background-color, --primary-blue-color);
    #shadow-color(1px, 1px, 4px, 0, --primary-shadow-color);
  }
  .is-normal {
    width: 36px;
    height: 36px;
    line-height: 36px;
  }
  .is-mini {
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
}
</style>
